$directions: (
  l: left,
  r: right,
  t: top,
  b: bottom,
);

@for $i from 1 through 30 {
  [px-#{$i}] {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
  [py-#{$i}] {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
  [mx-#{$i}] {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
  [my-#{$i}] {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
  @each $type, $val in (m: margin, p: padding) {
    @each $direction, $direction-value in $directions {
      [#{$type}#{$direction}-#{$i}] {
        #{$val}-#{$direction-value}: #{$i}px;
      }
    }
  }
}

[d-flex-center] {
  display: flex;
  align-items: center;
}
